<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <treeData :departs="defaultProps" :ishow="ishow" @add="add" />
        <hr>
        <treeData :departs="departs" :ishow="!ishow" @deldeparments="init" @add="add" />
      </el-card>

    </div>
    <add-dept :show-dialog="showDialog" :add-childrendepartment="addChildrendepartment" :datarenyuan="datarenyuan" />
  </div>
</template>

<script>
import AddDept from './components/addtree.vue'
// import { mapGetters } from 'vuex'
import treeData from './components/treeData'
import { getdepartchangesList } from '@/utils/departments'
import { getdepartmentsList } from '@/api/dashboard'
export default {
  components: {
    treeData, AddDept
  },

  data() {
    return {
      ishow: false,
      defaultProps: [{
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      }],
      departs: [],
      showDialog: false,
      addChildrendepartment: {},
      datarenyuan: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 查看列表信息

    async init() {
      // console.log(1)
      const { depts } = await getdepartmentsList()
      // console.log(depts)
      // this.departs = depts
      // 在这里有一个地址指向问题
      // this.getdepartchangesList(depts, '')
      // console.log(depts)
      this.departs = getdepartchangesList(depts, '')
      // this.departs = this.getdepartchangesListdigui(depts, '')
    },
    async add(data) {
      // console.log(data)
      this.showDialog = true
      // console.log(data)///
      this.addChildrendepartment = data
    }

  }
  // computed: {
  //   ...mapGetters([
  //     'name'
  //   ])
  // }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }

}
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
